<template>
  <div class="ZiXun">
    <!-- 顶部导航 -->
    <div class="nav_text">资讯管理</div>
    <div class="nav">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="跑步技巧" name="first">
          <run />
        </el-tab-pane>
        <el-tab-pane label="减脂健身" name="second">
          <JianShen />
        </el-tab-pane>
        <el-tab-pane label="睡个好觉" name="third">
          <sleep />
        </el-tab-pane>
        <el-tab-pane label="保护心脏" name="fourth">
          <BaoHu />
        </el-tab-pane>
        <el-tab-pane label="健康日常" name="fifth">
          <RiChang />
        </el-tab-pane>
      </el-tabs>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import run from "../../components/zhangwei/run.vue";
import JianShen from "../../components/zhangwei/JianShen.vue";
import sleep from "../../components/zhangwei/sleep.vue";
import BaoHu from "../../components/zhangwei/BaoHu.vue";
import RiChang from "../../components/zhangwei/RiChang.vue";


import { ref } from "vue";

const activeName = ref("first");
</script>

<style lang="scss" scoped>
.ZiXun {
  width: 100%;
  // background-color: #ccc;
  font-size: 14px;
  .nav_text {
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: bolder;
    font-style: normal;
    font-size: 20px;
    padding-bottom: 10px;
    background-color: #fff;
  }
}
</style>